import {
  StarTwoTone,
  LikeOutlined,
  MessageFilled,
  EyeOutlined,
  DeleteOutlined
} from '@ant-design/icons';
import {List, Tag, Popconfirm, Row, Col, Avatar, Button, Affix } from 'antd';
import React, {useEffect, useState} from 'react';
import { connect } from 'umi';
import LikeListContent from '../LikeListContent';
import styles from './index.less';
import { history } from '@@/core/history';
import * as echarts from "echarts";

const Likes = (props) => {
  const { likes, delLike, fetch } = props;
  const [pageSize, setPageSize] = useState(10);
  const IconText = ({ icon, text }) => (
    <span style={{ display: 'inline-block' }}>
      {icon} {text}
    </span>
  );

  const getOption = item => {
    return {
      title: {},
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: item.title,
          type: 'pie',
          radius: '85%',
          selectedMode: 'single',
          data: [
            { value: item.starCount, name: '收藏' },
            { value: item.likeCount, name: '点赞' },
            { value: item.messageCount, name: '评论' },
            { value: item.views, name: '浏览' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },
          itemStyle: {
            normal: {
              color: function (colors) {
                var colorList = [
                  '#389FFF',
                  'orangered',
                  'yellowgreen',
                  'lightblue'
                ];
                return colorList[colors.dataIndex];
              }
            },
          }
        }
      ]
    }
  }

  useEffect(() => {
    likes.list && likes.list.length > 0 && likes.list.map((item) => {
      let dom = document.getElementById('blogLikes_' + item.id + '_chart');
      let chart = echarts.init(dom);
      let option = getOption(item);
      chart.setOption(option);
    })
  })

  const toBlogInfo = (id) => {
    history.push('/blogInfo?id=' + id);
  };

  const toUserInfo = id => {
    history.push('/userInfo?id=' + id);
  }

  const deleteLike = id => {
    delLike(id);
  }

  const viewMore = () => {
    setPageSize(pageSize + 10);
    fetch(pageSize + 10);
  }

  return (
    <>
    <List
      size="large"
      className={styles.articleList}
      rowKey="id"
      itemLayout="vertical"
      dataSource={likes.list || []}
      renderItem={(item) => (
        <List.Item
          key={item.id}
          actions={[
            <IconText
              key="like"
              icon={<LikeOutlined title='点赞' onClick={() => toBlogInfo(item.objId)} style={{ color: 'orangered' }} />}
              text={item.likeCount}
            />,
            <IconText
              key="message"
              icon={
                <MessageFilled
                  title='评论'
                  onClick={() => toBlogInfo(item.objId)}
                  style={{ cursor: 'pointer', color: 'yellowgreen' }}
                />
              }
              text={item.messageCount}
            />,
            <IconText key="star" icon={<StarTwoTone title='收藏' onClick={() => toBlogInfo(item.objId)}/>} text={item.starCount} />,
            <IconText
              key="views"
              icon={
                <EyeOutlined
                  title='浏览'
                  style={{ cursor: 'pointer', color: 'lightblue' }}
                />
              }
              text={item.views}
            />,
            <Popconfirm
              title='确定删除吗？'
              onConfirm={() => deleteLike(item.id)}
            >
              <DeleteOutlined style={{ cursor: 'pointer' }}/>
            </Popconfirm>
          ]}
        >
          <List.Item.Meta
            title={
              <a className={styles.listItemMetaTitle} onClick={() => toUserInfo(item.blogUserId)}>
                <Avatar src={item.avatar}/>&nbsp;&nbsp;{item.loginName}
              </a>
            }
            description={
              <>
                <div>
                  <Row>
                    <Col span={24}>
                      分类：
                      {item.type && item.type.split(',').map((val) => <Tag color="success">{val}</Tag>)}
                    </Col>
                  </Row>
                  <Row style={{ marginTop: '2%' }}>
                    <Col span={24}>
                      标签：
                      {item.label && item.label.split(',').map((val) => <Tag color="processing">{val}</Tag>)}
                    </Col>
                  </Row>
                </div>
              </>
            }
          />
          <LikeListContent toBlogInfo={toBlogInfo} data={item} />
          <div id={`blogLikes_${item.id}_chart`} className={styles.blogCharts}></div>
        </List.Item>
      )}
    />
      {likes.list && likes.list.length > 9 &&
        <Affix offsetBottom={20}>
          <Button type="link" onClick={viewMore}>查看更多</Button>
        </Affix>
      }
    </>
  );
};

export default connect(({ userCenter }) => ({
  likes: userCenter.likes
}))(Likes);
